<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<title>教师中心</title>
	<link rel="stylesheet" href="../css/center.css">
</head>

<body style="position: relative;">

	<div class="face"></div>
	<div class="hair"></div>

	<div id="vue-root">
		<form id="form" method="post" ref="form" enctype="multipart/form-data" style="display: none">
			<input type="file" id="file" ref="file" name="file" accept="image/*" @change="upload">
		</form>
		<div class="ear2" v-text="teacher.schoolName"></div>
		<div class="ear" @click="unbind0">解除绑定</div>
		<div style="position: absolute;top: 18px;width: 100%">
			<div style="width: 27vw;margin: 0 auto;text-align: center;">
				<img :src="getImg(teacher.avatar)" class="avatar" @click="chooseImg">
				<!--<div style="color: white; margin-top: 1vw;" v-text="teacher.name"></div>-->
			</div>
		</div>
		<div class="neck">
			<div class="tie" v-text="teacher.name"></div>
		</div>

		<div class="body">
			<div v-for="(cell,index) in menus" :key="index">
				<a :href="cell.href">
					<div>
						<span class="unread" v-if="cell.field&&unread[cell.field]" v-text="unread[cell.field]"></span>
						<img :src="cell.img" alt="">
						<p v-text="cell.text"></p>
					</div>
				</a>
			</div>
		</div>

	</div>

	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>
	

	<script src="/wechat/js/wx.js"></script>
	<script src="/js/common.js"></script>
	<script>
		function store(teacher) {
			sessionStorage['hxt-teacher'] = JSON.stringify(teacher);
		}

		var menus = [{
			text: '班级通知',
			href: '../classes_notice.html',
			img: '../image/classes_notice.png',
		}, {
			text: '学生作业',
			href: 'student_homework.html',
			img: '../image/home_work.png',
		}, {
			text: '校园视频',
			href: '../monitoring.html',
			img: '../image/monitoring.png',
		}, {
			text: '请假管理',
			href: 'student_leave.html',
			img: '../image/my_leave.png',
			field: 'leave'
		}, {
			text: '学生成绩',
			href: 'grade.html',
			img: '../image/my_grade.png',
		}, {
			text: '教师风采',
			href: '../school_teacher_mein.html',
			img: '../image/school_message.png',
			field: 'teacherMien'
		}, {
			text: '学校通知',
			href: '../school_notice.html',
			img: '../image/school_notice.png',
			field: 'notice'
		}, {
			text: '班级圈',
			href: '../classes_circle.html',
			img: '../image/classes_circle.png',
			field: 'circle'
		}, {
			text: '学生食谱',
			href: '../cookbook.html#teacher',
			img: '../image/cookbook.png',
		}, {
			text: '学生考勤',
			href: 'student_attendance.html',
			img: '../image/student_attendance.png',
		}, {
			text: '我的考勤',
			href: '../attendance.html',
			img: '../image/my_attendance.png',
		}, {
			text: '添加学生',
			href: 'student_item.html',
			img: '../image/student_item.png',
		}, {
			text: '学校介绍',
			href: '../school_intro.html',
			img: '../image/school_introduction.png',
		}, {
			text: '学校新闻',
			href: '../school_news.html',
			img: '../image/school_news.png',
			field: 'news'
		}, {
			text: '学校招生',
			href: '../school_enrollment.html',
			img: '../image/school_enrollment.png',
			field: 'enrollment'
		}, {
			text: '学校荣誉',
			href: '../school_honor.html',
			img: '../image/school_honor.png',
			field: 'honor'
		}, {
			text: '通讯录',
			href: '../chat_addresslist.html',
			img: '../image/chat.png',
			field: 'chat'
		}];

		var app = new Vue({
			el: '#vue-root',
			data: {
				teacher: {},
				confirmShow: false,
				unread: {},
				menus: menus
			},
			created: function () {
				var teacher = getTeacher();
				if (teacher) {
					this.teacher = teacher;
					this.getUnread();
					return;
				}
				axios.get('/t/bound').then(function (res) {
					this.teacher = res.data;
					store(this.teacher);
					this.getUnread();
				}.bind(this));
			},
			methods: {
				unbind0: function () {
					if (!confirm('确认取消绑定？')) return;
					this.unbind();
				},
				unbind: function () {
					axios.post('/t/unbind').then(function (res) {
						sessionStorage.removeItem('hxt-teacher');
						location.replace('/wechat/index.html');
					});
				},
				getImg: function (pic) {
					if (!pic) return '../image/avatar.svg';
					return '/static/' + this.teacher.schoolId + '/teacher/' + pic;
				},
				upload: function () {
					var schoolId = this.teacher.schoolId;
					if (!schoolId) throw 'no school id';
					axios.post('/t/upload/teacher?schoolId=' + schoolId,
						new FormData(this.$refs.form)).then(function (res) {
							this.setAvatar(res.data.data);
						}.bind(this));
				},
				getUnread: function () {
					var cache = getUnreadCache();
					if (cache) {
						this.unread = cache;
						this.calUnreadSchool(this.unread);
						return;
					}

					var unread = getUnread();

					axios.post('/t/unread', unread).then(function (res) {
						this.unread = res.data;
						axios.post('/t/unread2', unread).then(function (res) {
							var data = res.data;
							this.unread = Object.assign(this.unread, data);
							setUnreadCache(this.unread);
							this.calUnreadSchool(this.unread);
						}.bind(this));
					}.bind(this));
				},
				calUnreadSchool: function (o) {
					Vue.set(this.unread, 'school', o.news + o.honor + o.enrollment + o.teacherMien);
				},
				chooseImg: function () {
					if (wxReady) {
						wxChooseImg(1, 'teacher', this.setAvatar);
					} else {
						this.$refs.file.click();
					}
				},
				setAvatar: function (avatar) {
					axios.post('/t/teacher', toFormParams({ avatar: avatar })).then(function (res) {
						this.teacher.avatar = avatar;
						store(this.teacher);
						this.$refs.file.value = '';
					}.bind(this));
				}
			}
		});
		sessionStorage['hxt-user'] = 'teacher';
	</script>

</body>

</html>